<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>主页</title>
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
    <script th:src="@{../bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
    <link rel="stylesheet" th:href="@{../bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/common.css}">
</head>
<body>
<div th:include="navigate::navbar"></div>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">Blog 主页</h1>
        <p class="lead">不需要任何权限即可访问</p>
        <span th:content="${Authorization}"></span>
    </div>
</div>
<div class="container">
    <span th:text="${auth}"></span><br>is user: <span th:text="${isuser}"></span><br><span th:text="${ip}"></span>
    <div class="blog-container">
        <!--在这输出博客-->
        <div th:each="blog:${blogs}">
            <!--start-->
            <div class="card">
                <div class="card-body">
                    <div class="card-header bg-light">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                        </svg>
                        <span th:text="${blog.authorName}"></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span th:text="${blog.lastPushDate}"></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="text-primary" th:text="${blog.topicName}"></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span th:text="${blog.clicks}"></span>阅读
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="blog-likes col-4 m-auto text-center" role="button"
                              th:switch="${blog.isCurrentUserLikes}">
                            <svg th:case="true" width="1em" height="1em" viewBox="0 0 16 16"
                                 class="bi bi-heart text-danger"
                                 fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                            </svg>
                            <svg th:case="false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart"
                                 fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                            </svg>
                            <span th:text="${blog.likes}"></span>
                        </span>
                    </div>
                    <div class="card-title">
                        <a class="text-decoration-none" th:href="@{'/b/'+${blog.id}}" th:text="${blog.title}"></a>
                    </div>
                    <div class="card-text" th:utext="${blog.contentView}"></div>
                </div>
            </div>
            <!--end-->
        </div>
        <button class="hidden-json-toggle btn btn-outline-secondary my-2">show json</button>
        <div class="hidden-json" th:text="${blogJson}"></div>
        <script>
            $(".hidden-json").toggle()
            $(".hidden-json").html($(".hidden-json").html().replace(/(?<=\"content\":)[^]+\"(?=,\"contentView)/g, "此处省略..."))
            $(document).ready(function () {
                $(".hidden-json-toggle").click(function () {
                    $(".hidden-json").toggle("fast")
                })
            })
        </script>
    </div>
    <div th:include="navigate::info"></div>
</div>
<div th:include="navigate::advertisement"></div>
</body>
</html>